<template>
  <div class="main">
    <!-- <home-nav :userData='userinfo'></home-nav>
    <div class="banner" :style="{background: 'url('+require('@/assets/bg_knowledgebase.png')+')',height:'80px',backgroundSize: 'cover'}"></div> -->
    <div class="container">
     <!-- 高级查询区域 -->
      
      <div class="navbar" style="position:relative">
        <ul>
          <li :class="{toggleClick:pageId==1}" @click="handleTogglePage(1)">商标库</li>
          <li :class="{toggleClick:pageId==2}" @click="handleTogglePage(2)">专利库</li>
        </ul>
        <a-input-group compact>
          <!-- <a-select default-value="商品名称">
            <a-select-option value="商品名称">
              商品名称
            </a-select-option>
            <a-select-option value="商品">
              商品
            </a-select-option>
          </a-select> -->
          <a-input-search placeholder="按商标名称、商标标签、申请号/注册号、申请人名称、实际权属主体模糊查询" v-model="queryParam.keyword"  @search="loadData" />
        </a-input-group>

      </div>
      <div class="trademark-nav"  :class="{'trademark-nav-hidden': showMore}">
        <div class="projec-class-box clearFix" style="border-bottom:1px solid #f2f2f2">
            <div class="projec-class-lable" style="float:left">商标类型：</div>
            <ul class="projec-class-list clearFix" >
              <li :class="['hoverShow',{clickShow:!queryParam.brandType||queryParam.brandType== ''}]" @click="ToggleSelectType('','brandType',null)">全部</li>
              <li :class="['hoverShow',{clickShow:queryParam.brandType==item.name}]" @click="ToggleSelectType(item.name,'brandType',item.code)" v-for="(item,index) in disc.brandType" :key="index">{{item?item.name:'--'}}</li>
            </ul>
        </div>
        <div class="projec-class-box clearFix" :class="{'project-class-more': more.moreRef0Class}" ref="moreRef0" style="border-bottom:1px solid #f2f2f2">
            <div class="projec-class-lable" style="float:left">商标价值：</div>
              <ul class="projec-class-list clearFix" :class="{'projec-class-list-more': more.moreRef0}">
              <li :class="['hoverShow',{clickShow:!queryParam.brandValue||queryParam.brandValue==''}]" @click="ToggleSelectType('','brandValue')">全部</li>
              <li :class="['hoverShow',{clickShow:queryParam.brandValue==item.name}]" @click="ToggleSelectType(item.name,'brandValue')" v-for="(item,index) in trademarkValue" :key="index">{{item?item.name:'--'}}</li>
            </ul>
            <div class="btn-more" @click="changeMore('moreRef0')">更多<a-icon :class="[ 'icon-child-down', { 'icon-child-up': more.moreRef0 }]" slot="suffixIcon" type="caret-up"/></div>
        </div>
        <div class="projec-class-box clearFix" :class="{'project-class-more': more.moreRef1Class}" ref="moreRef1" style="border-bottom:1px solid #f2f2f2">
            <div class="projec-class-lable" style="float:left">已覆盖类似群：</div>
              <ul class="projec-class-list clearFix" :class="{'projec-class-list-more': more.moreRef1}">
              <li :class="['hoverShow',{clickShow:!queryParam.groupCode||queryParam.groupCode==''}]" @click="ToggleSelectType('','groupCode')">全部</li>
              <li :class="['hoverShow',{clickShow:queryParam.groupCode==v.code}]" @click="ToggleSelectType(v.code,'groupCode')" v-for="(v,i) in disc.brandGroup" :key="i">{{v.code+'('+v.name+')'}}</li>
            </ul>
            <div class="btn-more" @click="changeMore('moreRef1')">更多<a-icon :class="[ 'icon-child-down', { 'icon-child-up': more.moreRef1 }]" slot="suffixIcon" type="caret-up"/></div>
        </div>
        <div class="projec-class-box clearFix" >
            <div class="projec-class-lable" style="float:left">商标状态：</div>
              <ul class="projec-class-list clearFix" >
              <li :class="['hoverShow',{clickShow:!queryParam.status||queryParam.status==''}]" @click="ToggleSelectType('','status')">全部</li>
              <li :class="['hoverShow',{clickShow:queryParam.status==v.name}]" @click="ToggleSelectType(v.name,'status')" v-for="(v,i) in disc.brandStatus" :key="i">{{v.name}}</li>
            </ul>
        </div>
      </div>
      <div class="trademark-tap"> 
        <span @click="showMore = !showMore">全部{{ !showMore ? '收起' : '展开'}}
          <a-icon :class="[ 'icon-child-down', { 'icon-child-up': showMore }]" slot="suffixIcon" type="caret-up"/>
        </span>
      </div>
      <div class="trademark-content">
        <div class="controlarea">
          <j-super-query class="super-query" :fieldList="superFieldList" ref="superQueryModal" @handleSuperQuery="handleSuperQuery"></j-super-query>
          <a-button v-has="'brand:add,brand:admin'" type="primary" style="margin-right:10px;"  @click="handleAdd(null)"><span class="iconfont icon-plus"></span>新增</a-button>
          <a-button v-has="'brand:delete,brand:admin'" @click="handleDelte" type="default" style="margin-right:10px;" icon="delete">删除</a-button>
          <a-button v-has="'brand:import,brand:admin'" type="default" style="margin-right:10px;" @click="importExcelDataBtn">导入Excel</a-button>
          <a-button v-has="'brand:export,brand:admin'" type="default" style="margin-right:10px;" @click="exportWebXls">导出列表</a-button>
          <a-button  v-has="'brand:admin'" type="default"  style="margin-right:10px;" @click="iconFile.visible=true">导入图标</a-button>
          <span class="showTotal" style="margin-right:10px;">
            总数：<span style="color:#50a9fb;">{{totalNumber}}</span>
          </span>
        </div>
        
        <div class="trademark-list">
          <a-table
            class="reservation-content"
            :columns="reservationColumns"
            :data-source="reservationData"
            :pagination="ipagination"
            :loading="tableLoading"
            @change="handleMainTableChange"
            size='small'
            rowKey='id'
            :row-selection="{ selectedRowKeys: selectedRowKeys,onChange:onSelectChange}"
            bordered
          >
         
            <template slot="imgSlot" slot-scope="text, record">
              
          
          <a-row type="flex" justify="space-around" align="middle">
             <a-col :span="24">
             <span v-if="!record.imageUrl" style="font-size: 12px;font-style: italic;">无图片</span>
             <a-tooltip v-else placement="bottom">
              <template slot="title">
                <span>点击图片可查看大图</span>
              </template>
              <img @click="uploadPreview({id:record.picture,fileName:'痛苦面具.gif'})"  :src="record.imageUrl" height="50px" alt="" style="max-width:80px;font-size: 12px;font-style: italic;"/>

             </a-tooltip>
            </a-col>
            <a-col :span="24" style="margin-top:8px">
              
              <!-- <a-tag color="green">审批</a-tag> -->
              <a-tag
                :color="'#31a0e1'"
              >
                {{record.status}}
              </a-tag>
           
            </a-col>
          </a-row>
            
        </template>
            <span slot="tags" slot-scope="tags">
              <!-- <a-tag color="green">审批</a-tag> -->
              <a-tag
                :color="tags === '油司令系列' ? '#f35a67' : '#67bf63'"
              >
                {{tags}}
              </a-tag>
            </span>
            <template slot="detail" slot-scope="text, record">
              <a @click="handleAdd(record)" v-has="'brand:edit,brand:admin'">编辑</a>
               <a-divider v-has="'brand:edit,brand:admin'" type="vertical" />
              <a @click="handleInfo(record)" v-has="'brand:detail,brand:admin'">明细</a>
              <!-- <a-popconfirm
                v-if="dataSource.length"
                title="Sure to delete?"
                @confirm="() => onDelete(record.key)"
              >
                <a href="javascript:;">Delete</a>
              </a-popconfirm> -->
              <!-- <a-button type="primary" style="width:125px;margin-bottom:10px;">油司令系列<a-icon type="edit" /></a-button> -->
              <!-- <a-button type="default" style="width:125px;">商标详情</a-button> -->
            </template>
          </a-table>
        </div>
      </div>
      <!-- 应用维护 -->
      <a-modal
        title="应用及维护"
        :visible="mainTainPopUp"
        :closable="false"
        :confirm-loading="confirmLoading"
        @ok="handleOk"
        @cancel="handleCancel"
        width='70vw'
        wrapClassName="mainTainPopUp"
      >
        <div class="headerControl">
          <a-input-group compact>
            <a-select default-value="A">
              <a-select-option value="A">
                商品名称
              </a-select-option>
              <a-select-option value="B">
                商品
              </a-select-option>
            </a-select>
            <a-input-search placeholder="按项目号、名称、项目经理、模糊查询" v-model="valueSearch"  @search="handleSearch" width="350"/>
          </a-input-group>
          <a-button>修改</a-button>
        </div>
        <a-table
          :columns="mainTainList"
          :data-source="mainTaindata"
          rowKey='id'
          :pagination="true"
          :indentSize='15'
          bordered
        >
        </a-table> 
      </a-modal>

      <!-- 商标标签 -->
      <a-modal
        title="选择商标标签"
        :visible="brandLabel.visible"
        :closable="false"
        :confirm-loading="confirmLoading"
        @ok="handlBrandLableOk('brandLabel')"
        @cancel="handleCancel('brandLabel')"
        :width='600'
        wrapClassName="selectAgencyPopUp"
      >
        <div class="headerControl">
          <a-input-search style="width:50%;" placeholder="请输入商标标签名称搜索" v-model="brandLabel.keyword" @search="handleBrandLableSearch"/>
        </div>
        <a-table
          :columns="brandLabel.columns"
          :row-selection="{ selectedRowKeys: brandLabel.selectedRowKeys,onChange:selectBrandLableChange,type:'radio'}"
          @change="handleTableChange('handleBrandLableSearch')"
          :data-source="brandLabel.data"
          rowKey='id'
          :pagination="brandLabel.ipagination"
          :indentSize='15'
          bordered
        >
         
        </a-table> 
      </a-modal>
      <!-- 选择代理机构 -->
      <a-modal
        title="选择代理机构"
        :visible="selectAgency.visible"
        :closable="false"
        :confirm-loading="confirmLoading"
        @ok="handlSelectAgencytOk('selectAgency')"
        @cancel="handleCancel('selectAgency')"
        :width='600'
        wrapClassName="selectAgencyPopUp"
      >
        <div class="headerControl">
          <a-input-search style="width:50%;" placeholder="请输入代理机构名称搜索" v-model="selectAgency.keyword" @search="handleSelectAgencySearch"/>
        </div>
        <a-table
          :columns="selectAgency.columns"
          :row-selection="{ selectedRowKeys: selectAgency.selectedRowKeys,onChange:selectAgencyChange,type:'radio'}"
          @change="handleTableChange('handleSelectAgencySearch')"
          :data-source="selectAgency.data"
          rowKey='nid'
          :pagination="selectAgency.ipagination"
          :indentSize='15'
          bordered
        >
         
        </a-table> 
      </a-modal>

      <!-- 选择申请人名称 -->
      <a-modal
        :title="selectProposer.title"
        :visible="selectProposer.visible"
        :closable="false"
        :confirm-loading="confirmLoading"
        @ok="handlSelectProposerOk('selectProposer')"
        @cancel="handleCancel('selectProposer')"
        :width='600'
        wrapClassName="selectProposerPopUp"
      >
        <div class="headerControl">
          <a-input-search style="width:50%;" placeholder="请输入关联公司名称搜索" v-model="selectProposer.keyword" @search="handleSelectProposerSearch"/>
        </div>
        <a-table
          :columns="selectProposer.columns"
          :row-selection="{ selectedRowKeys: selectProposer.selectedRowKeys ,onChange:selectProposerChange,type:'radio'}"
          :data-source="selectProposer.data"
          rowKey='id'
          :pagination="selectProposer.ipagination"
          :indentSize='15'
          @change="handleTableChange('handleSelectProposerSearch')"
          bordered
        >
          <!-- <template slot="status" slot-scope="text, record">
            <a-checkbox @change="onChange"></a-checkbox>
          </template> -->
        </a-table> 
      </a-modal>      

      <!-- 选择商品/服务 -->
      <a-modal
        title="选择商品/服务"
        :visible="selectService"
        :closable="false"
        :confirm-loading="confirmLoading"
        @ok="handleOk"
        @cancel="handleCancel"
        width='70vw'
        wrapClassName="selectServicePopUp"
      >
        <div class="headerControl">
          <div class="selected-box">
            <span>国际分类</span>
            <a-select default-value="10" style="width: 120px" @change="handleChange">
              <a-select-option value="10">
                10
              </a-select-option>
              <a-select-option value="20">
                20
              </a-select-option>
              <a-select-option value="30" disabled>
                30
              </a-select-option>
            </a-select>
          </div>
          <div class="selected-box">
            <span>类似群</span>
            <a-select default-value="3016" style="width: 120px" @change="handleChange">
              <a-select-option value="3016">
                3016
              </a-select-option>
              <a-select-option value="3017">
                3017
              </a-select-option>
              <a-select-option value="3018" disabled>
                3018
              </a-select-option>
            </a-select>
          </div>
          <a-input-search style="width:50%;" placeholder="请输入商品名称搜索" v-model="valueSearch" @search="handleSearch"/>
        </div>
        <a-table
          :columns="serviceList"
          :data-source="servicedata"
          rowKey='id'
          :pagination="true"
          :indentSize='15'
          bordered
        >
          <template slot="status" slot-scope="text, record">
            <a-checkbox @change="onChange"></a-checkbox>
          </template>
        </a-table> 
        <div class="selectedList">
          <strong>已选商品/服务</strong>
          <a-table
            :columns="selectedList"
            :data-source="selecteddata"
            rowKey='id'
            :pagination="true"
            :indentSize='15'
            bordered
            style="margin-top:15px;"
          >
            <template slot="status" slot-scope="text, record">
              <a style="color:#c8c8c8;"><a-icon type="close" /></a>
            </template>
          </a-table> 
        </div>
      </a-modal>   

      <!-- 公告流程文书信息 -->
      <a-modal
        title="公告流程文书信息"
        :visible="processInformation"
        :closable="true"
        :confirm-loading="confirmLoading"
        @ok="handleOk"
        @cancel="handleCancel"
        :width='800'
        okText="打印"
        wrapClassName="processInforPopUp"
      >
        <a-timeline>
          <a-timeline-item>
            <div class="processStep">
              <div class="processTime">
                <span>2021-03-26</span>
                <p>驳回复审-等待打印注册证</p>
              </div>
              <a href="">查看</a>
            </div>
            <div class="processStep">
              <div class="processTime">
                <span>2021-02-26</span>
                <p>商标注册公告（一）第1730期</p>
              </div>
              <a href="">查看</a>
            </div>
            <div class="processStep">
              <div class="processTime">
                <span>2021-03-26</span>
                <p>驳回复审-等待打印注册证</p>
              </div>
              <a href="">查看</a>
            </div>
            <div class="processStep">
              <div class="processTime">
                <span>2021-03-26</span>
                <p>驳回复审-等待打印注册证</p>
              </div>
              <a href="">查看</a>
            </div>
            <div class="processStep">
              <div class="processTime">
                <span>2021-03-26</span>
                <p>驳回复审-等待打印注册证</p>
              </div>
              <a href="">查看</a>
            </div>
            <div class="processStep">
              <div class="processTime">
                <span>2021-03-26</span>
                <p>驳回复审-等待打印注册证</p>
              </div>
              <a href="">查看</a>
            </div>
            <div class="processStep">
              <div class="processTime">
                <span>2021-03-26</span>
                <p>驳回复审-等待打印注册证</p>
              </div>
              <a href="">查看</a>
            </div>
            <div class="processStep">
              <div class="processTime">
                <span>2021-03-26</span>
                <p>驳回复审-等待打印注册证</p>
              </div>
              <a href="">查看</a>
            </div>
            <div class="processStep">
              <div class="processTime">
                <span>2021-03-26</span>
                <p>驳回复审-等待打印注册证</p>
              </div>
              <a href="">查看</a>
            </div>
            <div class="processStep">
              <div class="processTime">
                <span>2021-03-26</span>
                <p>驳回复审-等待打印注册证</p>
              </div>
              <a href="">查看</a>
            </div>
            <div class="processStep">
              <div class="processTime">
                <span>2021-03-26</span>
                <p>驳回复审-等待打印注册证</p>
              </div>
              <a href="">查看</a>
            </div>
            <div class="processStep">
              <div class="processTime">
                <span>2021-03-26</span>
                <p>驳回复审-等待打印注册证</p>
              </div>
              <a href="">查看</a>
            </div>
          </a-timeline-item>
          <a-timeline-item>
            <div class="processStep">
              <div class="processTime">
                <span>2021-03-26</span>
                <p>驳回复审-等待打印注册证</p>
              </div>
            </div>
          </a-timeline-item>
        </a-timeline>
      </a-modal>  

      <!-- 选择导出的关键字 -->
      <a-modal
        title="选择导出的关键字"
        :visible="selectKeyword"
        :closable="false"
        :confirm-loading="confirmLoading"
        @ok="handleOk"
        @cancel="handleCancel"
        :width='800'
        okText="导出表格"
        wrapClassName="selectKeywordPopUp"
      >
        <a-button type="primary" style="margin-bottom:15px;">设为默认</a-button>
        <a-checkbox-group @change="handleChange">
          <a-row>
            <a-col :span="8" v-for="item in keywordList" :key="item.type">
              <a-checkbox value="A">
                {{item.name}}
              </a-checkbox>
            </a-col>
          </a-row>
        </a-checkbox-group>
      </a-modal>   

      <!-- 商品/服务 -->
      <a-modal
        title="商品/服务"
        :visible="productService"
        :closable="true"
        :confirm-loading="confirmLoading"
        @cancel="handleCancel"
        :width='800'
        :footer="null"
        wrapClassName="productServicePopUp"
      >
        <div class="status-box">
          <a-row>
            <a-col :span="8">
              <a-badge color="#f35a67" text="已使用" />
            </a-col>
            <a-col :span="8">
              <a-badge color="#515151" text="未使用但无撤销风险" />
            </a-col>
            <a-col :span="8">
              <a-badge color="#ed8f2b" text="存在以及撤销风险" />
            </a-col>
            <a-col :span="8">
              <a-badge color="#4095e4" text="存在二级撤销风险" />
            </a-col>
          </a-row>
        </div>
        <div class="product-list">
          <a-row>
            <a-col :span="12" v-for="item in productList" :key="item.key">
              <span>{{item.key}}</span>
              <span class="product-name">{{item.name}}</span>
            </a-col>
          </a-row>
        </div>
        <div class="btn">
          <a-button style="background:#f78d47;color:#fff;margin-right:15px;" class="default">应用及维护</a-button>
          <a-button type="primary">商标增值点</a-button>
        </div>
      </a-modal>   

       <!-- 知识产权信息新增 -->
      <a-modal
        title="知识产权信息新增"
        :visible="intellectualInfo"
        :closable="false"
        :confirm-loading="confirmLoading"
        :width='800'
        :footer="null"
        wrapClassName="intellectualInfoPopUp"
      >
        <a-form-model :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
          <a-row>
            <a-col :span="12">
              <a-form-model-item label="商标名称">
                <a-input v-model="form.tradeName" />
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="国际分类">
                <a-select v-model="form.iceci" placeholder="please select your zone">
                  <a-select-option value="shanghai">
                    Zone one
                  </a-select-option>
                  <a-select-option value="beijing">
                    Zone two
                  </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="12">
              <a-form-model-item label="商标类型">
                <a-select v-model="form.trademarkType" placeholder="please select your zone">
                  <a-select-option value="shanghai">
                    Zone one
                  </a-select-option>
                  <a-select-option value="beijing">
                    Zone two
                  </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="申请/注册号">
                <a-input v-model="form.registrationNumber" />
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="12">
              <a-form-model-item label="初审公告日期">
                <a-date-picker
                  v-model="form.trialDate"
                  show-time
                  type="date"
                  placeholder="Pick a date"
                  style="width: 100%;"
                />
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="注册公告日期">
                <a-date-picker
                  v-model="form.registerDate"
                  show-time
                  type="date"
                  placeholder="Pick a date"
                  style="width: 100%;"
                />
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="12">
              <a-form-model-item label="专用权期限">
                <a-date-picker
                  v-model="form.specialUseDate"
                  show-time
                  type="date"
                  placeholder="Pick a date"
                  style="width: 100%;"
                />
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="初审公告日期">
                <a-input v-model="form.trialTime" />
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="12">
              <a-form-model-item label="注册公告期号">
                <a-input v-model="form.registerTime" />
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="代理办理机构">
                <a-select v-model="form.agency" placeholder="please select your zone">
                  <a-icon slot="suffixIcon"  type="plus"/>
                  <a-select-option value="shanghai">
                    Zone one
                  </a-select-option>
                  <a-select-option value="beijing">
                    Zone two
                  </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="12">
              <a-form-model-item label="申请人名称">
                <a-select v-model="form.nameOfapplicant" placeholder="please select your zone">
                  <a-icon slot="suffixIcon"  type="plus"/>
                  <a-select-option value="shanghai">
                    Zone one
                  </a-select-option>
                  <a-select-option value="beijing">
                    Zone two
                  </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="实际权属主体">
                <a-select v-model="form.actualOwnership" placeholder="please select your zone">
                  <a-icon slot="suffixIcon"  type="plus"/>
                  <a-select-option value="shanghai">
                    Zone one
                  </a-select-option>
                  <a-select-option value="beijing">
                    Zone two
                  </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="24">
              <a-form-model-item label="类似群"  :label-col="{span:3}" :wrapper-col="{span:19}">
                <a-input v-model="form.similitudeGroup" />
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item label="未注册类似群"  :label-col="{span:3}" :wrapper-col="{span:19}">
                <a-input v-model="form.notregisteredGroup" />
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item label="商品/服务"  :label-col="{span:3}" :wrapper-col="{span:19}">
                <a-select v-model="form.productService" placeholder="please select your zone">
                  <a-icon slot="suffixIcon"  type="plus"/>
                  <a-select-option value="shanghai">
                    Zone one
                  </a-select-option>
                  <a-select-option value="beijing">
                    Zone two
                  </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form-model>
        <div class="btn">
          <a-button type="primary" style="margin-right:15px;">确认添加</a-button>
          <a-button type="primary" style="margin-right:15px;">保存</a-button>
          <a-button>取消</a-button>
        </div>
      </a-modal>     

      <!-- 商标组信息 -->
      <a-modal
        title="商标组信息"
        :visible="trademarkInfo"
        :closable="false"
        :confirm-loading="confirmLoading"
        @ok="handleOk"
        @cancel="handleCancel"
        width='80vw'
        wrapClassName="trademarkInfoPopUp"
      >
        <div class="headerControl">
          <a-button>修改</a-button>
        </div>
        <a-descriptions bordered>
          <a-descriptions-item label="等级">
            一级
          </a-descriptions-item>
          <a-descriptions-item label="相关商标个数">
            8
          </a-descriptions-item>
          <a-descriptions-item label="注册目的">
            80700706601清爽沙拉汁60g*1
          </a-descriptions-item>
          <a-descriptions-item label="应当覆盖范围" :span="3">
            2901,2092,2903....，3201,3202,3203
          </a-descriptions-item>
          <a-descriptions-item label="已注册类似群" :span="3">
            2901,2092,2903....，3201,3202,32032901,2092,2903....，3201,3202,3203
          </a-descriptions-item>
          <a-descriptions-item label="公告中类似群" :span="3">
            2901,2092,2903....，3201,3202,32032901,2092,2903....，3201,3202,32032901,2092,2903....，3201,3202,32032901,2092,2903....，3201,3202,32032901,2092,2903....，3201,3202,32032901,2092,2903....，3201,3202,32032901,2092,2903....，3201,3202,3203
          </a-descriptions-item>
          <a-descriptions-item label="正在申请中类似群" :span="3">
            /
          </a-descriptions-item>
          <a-descriptions-item label="已失效类似群" :span="3">
            /
          </a-descriptions-item>
          <a-descriptions-item label="未申请类似群" :span="3">
            /
          </a-descriptions-item>
        </a-descriptions>
        <strong style="display:block;margin:45px 0px 10px;">已申请类别及类似群</strong>
        <a-table
          :columns="similarList"
          :data-source="similardata"
          rowKey='id'
          :pagination="true"
          :indentSize='15'
          bordered
        >
        </a-table> 
      </a-modal>

      <!-- 商标增值点 -->
      <a-modal
        title="商标增值点"
        :visible="trademarkaddedPoint"
        :closable="false"
        :confirm-loading="confirmLoading"
        @ok="handleOk"
        @cancel="handleCancel"
        width='70vw'
        wrapClassName="trademarkaddedPoint"
      >
        <div class="headerControl">
          <a-input-group compact>
            <!-- <a-select default-value="A">
              <a-select-option value="A">
                商品名称
              </a-select-option>
              <a-select-option value="B">
                商品
              </a-select-option>
            </a-select> -->
            <a-input-search placeholder="按商标名称、商标标签、申请号/注册号、申请人名称、实际权属主体模糊查询" v-model="valueSearch"  @search="handleSearch" width="350"/>
          </a-input-group>
          <a-button>修改</a-button>
        </div>
        <a-table
          :columns="mainTainList"
          :data-source="mainTaindata"
          rowKey='id'
          :pagination="true"
          :indentSize='15'
          bordered
        >
        </a-table> 
      </a-modal>

      
      <!-- 商品服务明细 -->
      <a-modal
        title="撤销风险明细"
        :visible="productDetail.visible"
        :closable="false"
        :confirm-loading="productDetail.confirmLoading"
        @ok="handleCancel('productDetail')"
        @cancel="handleCancel('productDetail')"
        width='70vw'
        wrapClassName="productDetailPopUp"
      >
        <div class="headerControl">
          <a-input-group compact>       
            <a-input-search placeholder="请按照已覆盖类似群、已申请/核定商品/服务进行搜索" v-model="productDetail.valueSearch"  @search="productDetailSearch" width="350"/>
          </a-input-group>
          <div><a-button  v-has="'brand:edit,brand:admin'" @click="productDetailAdd(null)">新增</a-button>
             <a-button  v-has="'brand:edit,brand:admin'" @click="importExcelDataBtnDetail">导入Excel</a-button></div>
         
        </div>
        <a-table
          :columns="productDetail.columns"
          :data-source="productDetail.data"
          rowKey='code'
          :pagination="productDetail.ipagination"
          :indentSize='15'
          bordered
        >
        <template slot="levelSlot" slot-scope="text">
          <div >{{ text==0||!text?'待定':text+'级'}}</div>
        </template>
         <template slot="booleanSlot" slot-scope="text">
          <div >{{ text=='1'?'是':'否'}}</div>
        </template>
        <span slot="action" slot-scope="text, record">
          <a v-has="'brand:edit,brand:admin'" @click="productDetailAdd(record)">编辑</a>
          <a-divider type="vertical"  v-has="'brand:edit,brand:admin'" />
          <a v-has="'brand:edit,brand:admin'" @click="productDetailDelete(record.id)">删除</a>        
        </span>
        </a-table> 
      </a-modal>
      <!-- 新建商品明细 -->


       <a-modal
        :title="productCreat.title"
        :key="productCreat.keyId"
        :visible="productCreat.visible"
        :closable="false"
        :confirm-loading="productCreat.confirmLoading"
        @ok="productCreatHandleOk"
        @cancel="handleCancel('productCreat')"
        width='70vw'
        wrapClassName="createTrademarkoPopUp"
      >
        <a-form-model ref="productCreatForm" :model="productCreat.model" :rules="productCreat.validatorRules" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-row>
          <a-col :span="24">
            <a-form-model-item label="已覆盖类似群" :labelCol="labelCol" :wrapperCol="wrapperCol" :prop="'code'">
              <a-input v-model="productCreat.model.code" placeholder="请输入已覆盖类似群"  ></a-input>
            </a-form-model-item>
          </a-col>
          
          <a-col :span="24">
            <a-form-model-item label="已申请/核定商品/服务" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="goodsService">
              <a-textarea :autosize="true" v-model="productCreat.model.goodsService" placeholder="请输入已申请/核定商品/服务"  ></a-textarea>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="类似群的价值等级" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="valueLevel">
               <a-select v-model="productCreat.model.valueLevel" placeholder="">
                   <a-select-option value="0"  key="类似群的价值等级">
                    待定
                  </a-select-option>
                  <a-select-option :value="item" v-for="item of 3" :key="item">
                    {{`${item}级`}}
                  </a-select-option>
                </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="具体增值点" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="addedValue">
              <a-input v-model="productCreat.model.addedValue" placeholder="请输入具体增值点"  ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="具体使用的商品" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="specificUseGoods">
              <a-textarea :autosize="true" v-model="productCreat.model.specificUseGoods" placeholder="请输入具体使用的商品"  ></a-textarea>
            </a-form-model-item>
          </a-col>
         <a-col :span="24">
            <a-form-model-item label="具体使用的服务" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="specificUseService">
              <a-textarea :autosize="true" v-model="productCreat.model.specificUseService" placeholder="请输入具体使用的服务"   ></a-textarea>
            </a-form-model-item>
          </a-col>

       
         
         
        </a-row>
      </a-form-model>
      </a-modal>


       <!-- 新建商标 -->
      <a-modal
        :title="createTitle"
       
        :visible="createTrademark"
        :closable="false"
        :confirm-loading="confirmLoading"
        :width='800'
        :footer="null"
        
        wrapClassName="createTrademarkoPopUp"
      >
        <a-form-model  ref="createFromRefs" :rules="validatorRules" :model="createFrom" :label-col="labelCol" :wrapper-col="wrapperCol">
          <a-row>
            <a-col :span="12">
              <a-form-model-item label="商标名称" :prop="'brandName'">
                <a-input v-model="createFrom.brandName" />
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="商标状态">
                <a-select v-model="createFrom.status" placeholder="please select your zone" :prop="'status'">
                 <a-select-option :value="item.name" v-for="item of disc.brandStatus" :key="item.nid">
                    {{item.name}}
                  </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="12">
              <a-form-model-item label="商标标签" >
               
                 <!-- <a-select v-model="createFrom.brandLabel" placeholder="please select your zone">
                   <a-select-option :value="item.name"  v-for="item of disc.brandLabel" :key="item.id">
                    {{item.name}}
                  </a-select-option>
                </a-select> -->
                <a-input-search readOnly v-model="createFrom.brandLabel" placeholder=""   @search="handleOpenModalfucntion('brandLabel','请选择商标标签','brandLabel')" />

              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="商标类型" :prop="'brandType'">
                <a-select v-model="createFrom.brandType" placeholder="please select your zone" @change="handleBranTypeChange" >
                   <a-select-option :value="item.name"  v-for="item in disc.brandType" :key="item.nid">
                    {{item.name}}
                  </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="12">
              <a-form-model-item label="商标价值" :prop="'brandValue'">
                <a-select v-model="createFrom.brandValue" placeholder="please select your zone" @change="handleBrandValueChange">
                 <a-select-option :value="item.name" v-for="item in disc.changeBrandValue" :key="item.nid">
                    {{item.name}}
                  </a-select-option>
                  
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="国际分类">
                 <a-select v-model="createFrom.internationalClass" placeholder="please select your zone">
                  <a-select-option :value="item" v-for="(item,i) of disc.internationalClass" :key="i">
                    {{item}}
                  </a-select-option>
                </a-select>
                
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="12">
              <a-form-model-item label="申请/注册号" :prop="'applicationNo'">
                <a-input v-model="createFrom.applicationNo" />
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="申请日期">
                <a-date-picker
                  v-model="createFrom.applicationTime"
                  
                  type="date"
                  style="width: 100%;"
                />
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="12">
              <a-form-model-item label="初审公告日期">
                <a-date-picker
                  v-model="createFrom.firstInstanceTime"
                  
                  type="date"
                  placeholder="Pick a date"
                  style="width: 100%;"
                />
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="注册公告日期">
                <a-date-picker
                  v-model="createFrom.registerTime"
                 
                  type="date"
                  placeholder="Pick a date"
                  style="width: 100%;"
                />
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="12">
              <a-form-model-item label="专用权期限">
                <a-date-picker
                  v-model="createFrom.termTime"
                
                  type="date"
                  style="width: 100%;"
                />
              </a-form-model-item>
            </a-col>
           <a-col :span="12">
              <a-form-model-item label="申请人名称">
                <!-- <a-select v-model="createFrom.applicationName" placeholder="please select your zone">
                  
                   <a-select-option :value="item.name" v-for="item of disc.brandApplicantMain" :key="item.id">
                    {{item.name}}
                  </a-select-option>
                </a-select> -->
                  <a-input-search readOnly v-model="createFrom.applicationName" placeholder=""   @search="handleOpenModalfucntion('selectProposer','请选择申请人名称','applicationName')" />
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row>
            
            <a-col :span="12">
              <a-form-model-item label="实际权属主体">
                <!-- <a-select v-model="createFrom.mainBody" placeholder="please select your zone">
                  <a-icon slot="suffixIcon"  type="plus"/>
                  <a-select-option :value="item.name"  v-for="item of disc.brandApplicantMain" :key="item.id">
                    {{item.name}}
                  </a-select-option>
                </a-select> -->
                   <a-input-search readOnly v-model="createFrom.mainBody" placeholder=""   @search="handleOpenModalfucntion('selectProposer','请选择实际权属主体','mainBody')" />
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
            <a-form-model-item label="代理机构" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="agency">
              <!-- <a-select v-model="createFrom.agency" placeholder="please select your zone">
                  <a-icon slot="suffixIcon"  type="plus"/>
                  <a-select-option :value="item.name" v-for="item of disc.brandAgency" :key="item.id">
                    {{item.name}}
                  </a-select-option>
                
                </a-select> -->
                <a-input-search readOnly v-model="createFrom.agency" placeholder=""   @search="handleOpenModalfucntion('selectAgency','请选择代理机构','agency')" />
            </a-form-model-item>
          </a-col>
          </a-row>
          <a-row>
            <!-- <a-col :span="24">
              <a-form-model-item label="已覆盖类似群"  :label-col="{span:4}" :wrapper-col="{span:19}">
                <a-input  :disabled="true" v-model="createFrom.groupCode" />
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item class="changeStyle" label="已申请/核定商品/服务"  :label-col="{span:4}" :wrapper-col="{span:19}">
                <a-input :disabled="true" v-model="createFrom.groupGoodsService" />
              </a-form-model-item>
            </a-col> -->
            <a-col :span="24">
              <a-form-model-item label="商品图样"  :label-col="{span:4}" :wrapper-col="{span:19}">
                <ht-upload
                ref="attachPicture"
                  class="avatar-uploader"
                  list-type="text"
                  multiple
                  dbKey="Trd"
                  busField="hteLibBrand"
                  :busKey="createFrom.id"  
                  busType="picture"
                  ftpKey="ftp"
                  :limit="1"
                  :show-file-list = "true"
                  accept=".jpg,.jpeg,.png"
                  :onPreview="uploadPreview"
                   :before-remove="beforeRemove"
                  :key="formId"
                  v-model="piclist">
                  <el-button size="small" type="primary">上传</el-button>
                </ht-upload> 
                <a-input type="hidden" v-model="createFrom.imageUrl" />
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item label="权利证书"  :label-col="{span:4}" :wrapper-col="{span:19}">
                <ht-upload 
                ref="attachLetterOfAuthorization"
                 :key="formId"
                  class="avatar-uploader"
                  multiple
                  dbKey="Trd"
                  busField="hteLibBrand"
                  :busKey="createFrom.id"  
                  busType="letterOfAuthorization"
                  ftpKey="ftp"
                  :show-file-list = "true"
                  :onPreview="uploadPreview"
                  :before-remove="beforeRemove" 
                  v-model="certificatelist">
                  <el-button size="small" type="primary">上传</el-button>
                </ht-upload> 
                <!-- <a-table
                  :columns="uploadList"
                  :data-source="uploadData"
                  :pagination="false"
                  rowKey='id'
                >
                  <span slot="action" slot-scope="text, record">
                    <a-icon type="delete" />
                  </span>
                </a-table> -->
                <a-input type='hidden' v-model="createFrom.letterOfAuthorization" />
              </a-form-model-item>
            </a-col>
            <a-col :span="24" >
              <a-form-model-item label="撤销风险明细"  :label-col="{span:4}" :wrapper-col="{span:19}">
                <a-input type='hidden' v-model="createFrom.brandSimilitudeGroups" />
                <a-button v-if="createFrom.isAddFlag == '1'" type="primary" @click="importExcelDataBtnDetail">导入明细</a-button>
                <span  v-else>
                  <a-button type="primary" @click="handleDetail" >撤销风险明细</a-button>
                  <span style="color:#f5222d">(注意修改申请/注册号后撤销风险明细会关联不上)</span>
                </span>
                
              </a-form-model-item>
             
            </a-col>
          </a-row>
        </a-form-model>
        <div  style="    text-align: center">
          <a-button type="primary" :loading="confirmLoading" style="margin-right:15px;" @click="submitForm">确认</a-button>
          <!-- <a-button type="primary" style="margin-right:15px;">保存</a-button> -->
          <a-button @click="handleCancelBtn">取消</a-button>
        </div>
      </a-modal>
              
      <!-- 批量导入图标 -->
        <a-modal v-model="iconFile.visible" title="导入图标" @ok="handleUpload" :width="800">
         <a-upload :file-list="iconFileList" :remove="handleRemove" :before-upload="beforeUpload" accept=".zip">
              <a-button style="width:auto"> <a-icon type="upload" />选择文件</a-button><span style="color: rgb(245, 34, 45);">（上传格式为zip压缩包;图片名称为商标注册号；图片格式为jpg、png、jpeg）</span>
            </a-upload>
          
            <template slot="footer">
            <a-button key="back" @click="handleCancel('iconFile')">
              取消
            </a-button>
            <a-button key="submit" type="primary" 
                  :disabled="iconFileList.length === 0"
                  :loading="uploading"
                  style="margin-top: 16px;width:auto"
                  @click="handleUpload">
              {{ uploading ? '上传中' : '开始上传' }}
        </a-button>
      </template>
      </a-modal>
        <!-- 导入Excel -->
      <excel-paste :columnsExcel="columnsExcel" :exportXlsTemplateUrl="exportXlsTemplateUrl"  :excelVisible="excelVisible" :excelConfirmLoading="excelConfirmLoading"   @handleOkExcel="handleOkExcel" @handleCancelExcel="handleCancelExcel"></excel-paste>
      
      <!-- 导入明细 -->
      <excel-paste :clearData="importDetail.clearData" :columnsExcel="importDetail.columnsExcel" :exportXlsTemplateUrl="importDetail.exportXlsTemplateUrl"  :excelVisible="importDetail.excelVisible" :excelConfirmLoading="importDetail.excelConfirmLoading"   @handleOkExcel="handleOkExcelDetail" @handleCancelExcel="handleCancelExcelDetail"></excel-paste>

    </div>
    <FixedMenu :menuRight="-106">
      <ul class="floatNavTab" >
        <!-- <li  v-if="false"  @click="linkPage('/trademarklibrary/BrandList')">商标库</li> -->
        <li v-has="'brandSimilitudeGroup:read,brand:admin'" @click="linkPage('/trademarklibrary/brandSimilitudeGroupList')">撤销风险维护</li>
        <li v-has="'brandValueSimilitude:read,brand:admin'"   @click="linkPage('/trademarklibrary/brandValueSimilitudeList')">类似群范围维护</li>
        <li v-has="'brandApplicantMain:read,brand:admin'"  @click="linkPage('/trademarklibrary/brandApplicantMainList')">主体权限维护</li>
        <li v-has="'brandLabel:read,brand:admin'" @click="linkPage('/trademarklibrary/brandLabelList')">商标标签维护</li> 
        <li v-has="'brandGoods:read'" @click="linkPage('/trademarklibrary/brandGoodsServicesList')">商品服务维护</li> 
      </ul>
    </FixedMenu>
  </div>
</template>
<script>
import '@/utils/upload.install.js'
import ExcelPaste from '@/components/excelPaste/ExcelPaste'
import { httpAction, getAction,postAction,downloadFileLink,deleteAction,previewAttach } from '@/api/manage'
import { codeInfoList } from "@/api/codeInfo"
import {randomUUID} from '@/utils/util'
import cloneDeep from 'lodash/cloneDeep'
import Vue from 'vue'
import { formatFileSize, endWith } from '@/utils/common.js'
import { ACCESS_TOKEN, USER_INFO } from '@/store/mutation-types'
import { ResizeHandleMoreMixin } from '@/mixins/ResizeHandleMoreMixin'
import FixedMenu from '@/components/tools/FixedMenu'
const attachmentVO = {busField:'hteLibBrand',busType:'picture',dbKey:"Trd",ftpKey:'ftp',busKey:''};

const queryParamInit = {

}
const productList = [];

for (let i = 0; i < 20; i++) {
  productList.push({
    key: `300${i.toString()}`,
    name: '以谷物为主的零食小吃',
  });
}


export default {
  components:{ExcelPaste, FixedMenu},
  mixins: [ResizeHandleMoreMixin],
  data () {
    return {
      showMore:false,
      totalNumber:0,
      disc:{
        //数据字典
        brandType:[],
        brandValue:[],
        brandGroup:[],
        brandStatus:[],
        changeBrandValue:[],
        internationalClass:45,
        brandLabel:[],
        brandApplicantMain:[],
        brandAgency:[]
      },
      mainTainPopUp:false,

      selectService:false,
      processInformation:false,
      selectKeyword:false,
      productService:false,
      intellectualInfo:false,
      createTrademark:false,
      createTitle:'',
      trademarkInfo:false,
      trademarkaddedPoint:false,
     
      confirmLoading:false,
      selectedRowKeys:[],
      selectedRows:[],
      url:{
        // getCalendarpageData:'/home/getCalendarpageData'
        list: "/knowledge/brand/list",
        listWeb:'/knowledge/brand/listWeb',
        delete: "/knowledge/brand/delete",
        deleteBatch: "/knowledge/brand/deleteBatch",
        exportXlsUrl: "/knowledge/brand/exportXls",
        importExcelUrl: "knowledge/brand/importExcel",

        exportWebXls:'/knowledge/brand/exportWebXls',
        //导入Excel
        addBatch:'/knowledge/brand/addBatch',
        iconUpload:'/knowledge/brand/iconUpload',
        //获取附件
        getAttaches:"/tp/attach/getAttaches",
        commonImage:'/common/getImage',
        brandLabel:'/knowledge/brandLabel/list',
        brandApplicantMain:'/knowledge/brandApplicantMain/list',
        getAttachInfo: '/tp/attach/getAttaches',
        brandSimilitudeGroup: "/knowledge/brandSimilitudeGroup/list",
        brandSimilitudeGroupDelet:'/knowledge/brandSimilitudeGroup/deleteBatch',
        brandSimilitudeGroupAddBatch:'/knowledge/brandSimilitudeGroup/addBatch',
      },
      valueSearch:'',
      activeCode:-1,
      valueStatus:-1,
      coveredStatus:-1,
      tradeStatus:-1,
      pageId:1,
      piclist:[],
      certificatelist:[],
      formId:'',
      trademarkType:[
        {
          code:10,
          name:'字号商标'
        },
        {
          code:20,
          name:'业务商标'
        },
        {
          code:30,
          name:'策略商标'
        },
        {
          code:40,
          name:'闲置商标'
        },
      ],
      trademarkValue:[
        {
          code:10,
          name:'股份海天字号'
        },
        {
          code:20,
          name:'食品运营公司字号'
        },
      ],
      coveredGroup:[
        {
          code:10,
          name:'2905(腌制蔬菜)'
        },
        {
          code:20,
          name:'2908(食用油)'
        },
        {
          code:30,
          name:'3003(糖)'
        },
        {
          code:40,
          name:'3008(大米)'
        },
        {
          code:50,
          name:'2905(腌制蔬菜)'
        },
        {
          code:60,
          name:'2908(食用油)'
        },
        {
          code:70,
          name:'3003(糖)'
        },
        {
          code:80,
          name:'3008(大米)'
        },
      ],
      trademarkStatus:[
        {
          code:10,
          name:'申请中'
        },
        {
          code:20,
          name:'已公告'
        },
        {
          code:30,
          name:'已注册'
        },
        {
          code:40,
          name:'异议中'
        },
        {
          code:50,
          name:'撤销中'
        },
        {
          code:60,
          name:'无效宣告中'
        },
        {
          code:70,
          name:'已无效'
        },
      ],
      reservationColumns:[
          {
          title: '商标图样',
          dataIndex: 'id',
          width:'100px',
          align:'center',
          scopedSlots: { customRender: 'imgSlot' },
        },
        {
            title:'商标名称',
            align:"center",
            dataIndex: 'brandName',
            width:'8%',
          },
          {
            title:'商标标签',
            align:"center",
            dataIndex: 'brandLabel',
             width:'12%',
          },
          {
            title:'商标类型',
            align:"center",
            dataIndex: 'brandType',
             width:'8%',
          },
          {
            title:'商标价值',
            align:"center",
            dataIndex: 'brandValue',
             width:'12%',
          },
          {
            title:'申请号/注册号',
            align:"center",
            dataIndex: 'applicationNo',
             width:'16%',
          },
          {
            title:'国际分类',
            align:"center",
            dataIndex: 'internationalClass',
             width:'8%',
          },
          // {
          //   title:'商标状态',
          //   align:"center",
          //   dataIndex: 'status'
          // },

           {
            title:'申请日期',
            align:"center",
            dataIndex: 'applicationTime',
             width:'12%',
             ellipsis: true,
            customRender:function (text) {
              return !text?"":(text.length>10?text.substr(0,10):text)
            }
          },
          // {
          //   title:'申请人名称',
          //   align:"center",
          //   dataIndex: 'applicationName'
          // },
          // {
          //   title:'实际权属主体',
          //   align:"center",
          //   dataIndex: 'mainBody'
          // },
       
         {
            title:'已覆盖类似群',
            align:"center",
            dataIndex: 'groupCode',
             width:'10%',
             ellipsis: true
          },
         
          {
            title:'已申请/核定商品/服务',
            align:"center",
            dataIndex: 'groupGoodsService',
             width:'14%',
             ellipsis: true
          },
        {
          title: '操作',
          align:'center',
          dataIndex: 'detail',
          width:'95px',
          // fixed:"right",
          scopedSlots: { customRender: 'detail' },
        },
      ],
      reservationData:[

      ],
      mainTainList : [
        { title: '类似群', width:'10%',align:'center',dataIndex: 'similitudeGroup', key: 'similitudeGroup' },
        { title: '商品/服务', width:'25%',align:'left',dataIndex: 'shopService', key: 'shopService'},
        { title: '是否使用', width:'10%',align:'center',dataIndex: 'useOrnot', key: 'useOrnot'},
        { title: '使用产品', width:'20%',align:'left',dataIndex: 'productUse', key: 'productUse'},
        { title: '是否存在撤销风险', width:'10%',align:'center',dataIndex: 'riskOrnot', key: 'riskOrnot' },
        { title: '撤销风险等级', width:'10%',align:'left',dataIndex: 'withdrawalLevel', key: 'withdrawalLevel' },
        { title: '商标等级', width:'15%',align:'center',dataIndex: 'trademarkGrade', key: 'trademarkGrade' },
      ],
      mainTaindata:[
        {
          similitudeGroup:'3016',
          shopService:'300195以谷物为主的零食小食',
          useOrnot:'否',
          productUse:'8070076001清爽沙拉汁60g*1',
          riskOrnot:'否',
          withdrawalLevel:'/',
          id:'1',
          trademarkGrade:'二级'
        }
      ],
  
      productDetail:{
          columns:[
           {
            title:'已覆盖类似群',
            align:"center",
            dataIndex: 'code'
          },
           
          {
            title:'已申请/核定商品/服务',
            align:"center",
            dataIndex: 'goodsService'
          },
         {
            title:'类似群的价值等级',
            align:"center",
            dataIndex: 'valueLevel',
             scopedSlots: { customRender: 'levelSlot' }
          },
          {
            title:'具体增值点',
            align:"center",
            dataIndex: 'addedValue'
          },
          {
            title:'具体使用的商品',
            align:"center",
            dataIndex: 'specificUseGoods',
            
          },
           {
            title:'具体使用的服务',
            align:"center",
            dataIndex: 'specificUseService',
            
          },
           {
            title:'是否有撤销风险',
            align:"center",
            dataIndex: 'isCancelRisk',
            
             scopedSlots: { customRender: 'booleanSlot' }
          },
          {
            title:'撤销风险等级',
            align:"center",
            dataIndex: 'cancelRiskLevel',
             scopedSlots: { customRender: 'levelSlot' }
          },
          {
              title: '操作',
              dataIndex: 'action',
              align:"center",
              fixed:"right",
             
              scopedSlots: { customRender: 'action' }
            }
          ],
          data:[],
          visible:false,
          confirmLoading:false,
          valueSearch:'',
          ipagination:{  current: 1,
          pageSize: 10}

      },
      productCreat:{
        title:'新建撤销风险明细',
        visible:false,
        confirmLoading:false,
        model:{},
        validatorRules: {
           goodsService: [
              { required: true, message: '请输入已申请/核定商品/服务!'},
           ]
        },


      },
      selectAgency:{
        columns:[      
        { title: '代理机构名称', width:'65%',align:'left',dataIndex: 'name', key: 'name'}
      ],
      visible:false,
      keyword:'',
      selectedRowKeys:[],
      title:'选择代理机构',
      data:[],
      /* 分页参数 */
      ipagination:{
        current: 1,
        pageSize: 10
      },
     
      search:"handleSelectAgencySearch",
      selectionRows:[],
      setValueKey:"agency"
      },
      brandLabel:{
        columns:[      
        { title: '标签名称', width:'65%',align:'left',dataIndex: 'name', key: 'name'}
      ],
      visible:false,
      keyword:'',
      selectedRowKeys:[],
      title:'选择标签',
      data:[],
      /* 分页参数 */
      ipagination:{
        current: 1,
        pageSize: 10
      },
     
      search:"handleBrandLableSearch",
      selectionRows:[],
      setValueKey:"brandLabel"
      },
      selectProposer:{
        columns:[      
        { title: '公司名称', width:'65%',align:'left',dataIndex: 'name', key: 'name'}
      ],
      visible:false,
      keyword:'',
      selectedRowKeys:[],
      title:'选择选择申请人名称',
      data:[],
      /* 分页参数 */
      ipagination:{
        current: 1,
        pageSize: 10,
      },
        search:"handleSelectProposerSearch",
        selectionRows:[],
         setValueKey:"mainBody"
      },
  

      serviceList: [
        { title: '国际分类', width:'10%',align:'left',dataIndex: 'iceci', key: 'iceci' },
        { title: '类似群', width:'10%',align:'left',dataIndex: 'similitudeGroup', key: 'similitudeGroup'},
        { title: '商品服务', width:'30%',align:'left',dataIndex: 'productService', key: 'productService'},
        { title: '五方', width:'10%',align:'left',dataIndex: 'fiveSides', key: 'fiveSides'},
        { title: '商品编码', width:'15%',align:'left',dataIndex: 'commodityCode', key: 'commodityCode'},
        { title: '商品类型', width:'15%',align:'left',dataIndex: 'commodityType', key: 'commodityType'},
        { title: '选取状态', width:'15%',align:'center',dataIndex: 'status', key: 'status',scopedSlots: { customRender: 'status'} },
      ],
      servicedata:[
        {
          iceci:'30',
          similitudeGroup:'3016',
          status:'',
          productService:'除香精油外的蛋用调味品',
          fiveSides:'是',
          commodityCode:'300070',
          commodityType:'尼斯商品',
          id:'1',
        },
       
      ],
      selectedList: [
        { title: '国际分类', width:'10%',align:'left',dataIndex: 'iceci', key: 'iceci' },
        { title: '类似群', width:'10%',align:'left',dataIndex: 'similitudeGroup', key: 'similitudeGroup'},
        { title: '商品服务', width:'30%',align:'left',dataIndex: 'productService', key: 'productService'},
        { title: '五方', width:'10%',align:'left',dataIndex: 'fiveSides', key: 'fiveSides'},
        { title: '商品编码', width:'15%',align:'left',dataIndex: 'commodityCode', key: 'commodityCode'},
        { title: '商品类型', width:'15%',align:'left',dataIndex: 'commodityType', key: 'commodityType'},
        { title: ' ', width:'15%',align:'center',dataIndex: 'status', key: 'status',scopedSlots: { customRender: 'status'} },
      ],
      selecteddata:[
        {
          iceci:'30',
          similitudeGroup:'3016',
          status:'',
          productService:'除香精油外的蛋用调味品',
          fiveSides:'是',
          commodityCode:'300070',
          commodityType:'尼斯商品',
          id:'1',
        },
        {
          iceci:'30',
          similitudeGroup:'3016',
          status:'',
          productService:'除香精油外的蛋用调味品',
          fiveSides:'是',
          commodityCode:'300070',
          commodityType:'尼斯商品',
          id:'2',
        },
       
      ],
      keywordList:[
        {
          name:'商标图案',
          type:'1'
        },
        {
          name:'关联商标数量',
          type:'2'
        },
        {
          name:'是否存在撤销风险',
          type:'3'
        },
        {
          name:'类似群',
          type:'4'
        },
        {
          name:'申请人名称',
          type:'5'
        },
        {
          name:'商标图案',
          type:'16'
        },
        {
          name:'关联商标数量',
          type:'25'
        },
        {
          name:'是否存在撤销风险',
          type:'34'
        },
        {
          name:'类似群',
          type:'47'
        },
        {
          name:'申请人名称',
          type:'58'
        },
        {
          name:'商标图案',
          type:'11'
        },
        {
          name:'关联商标数量',
          type:'21'
        },
        {
          name:'是否存在撤销风险',
          type:'31'
        },
        {
          name:'类似群',
          type:'41'
        },
        {
          name:'申请人名称',
          type:'51'
        }
      ],
      productList,
      labelCol: { span: 8 },
      wrapperCol: { span: 14 },
      form: {
        name: '',
        region: undefined,
        date1: undefined,
        delivery: false,
        type: [],
        resource: '',
        desc: '',
      },
      createFrom:{
       
      },
      similarList : [
        { title: '序号', width:'5%',align:'center',dataIndex: 'key', key: 'key'},
        { title: '商标图样', width:'5%',align:'center',dataIndex: 'srademarkPic', key: 'srademarkPic'},
        { title: '商标名称', width:'5%',align:'left',dataIndex: 'srademarkName', key: 'srademarkName'},
        { title: '商标状态', width:'5%',align:'center',dataIndex: 'srademarkStatus', key: 'srademarkStatus' },
        { title: '申请/注册号', width:'5%',align:'left',dataIndex: 'registrationNumber', key: 'registrationNumber' },
        { title: '国际分类', width:'5%',align:'center',dataIndex: 'iceci', key: 'iceci' },
        { title: '申请日期', width:'5%',align:'center',dataIndex: 'applicationDate', key: 'applicationDate' },
        { title: '初审公告日期', width:'5%',align:'center',dataIndex: 'trialDate', key: 'trialDate' },
        { title: '注册公告日期', width:'5%',align:'center',dataIndex: 'registerDate', key: 'registerDate' },
        { title: '截止日期', width:'5%',align:'center',dataIndex: 'deadline', key: 'deadline' },
        { title: '商品/服务', width:'5%',align:'left',dataIndex: 'shopService', key: 'shopService'},
        { title: '类似群', width:'5%',align:'center',dataIndex: 'similitudeGroup', key: 'similitudeGroup' },
        { title: '未注册类似群', width:'5%',align:'center',dataIndex: 'notregisteredGroup', key: 'notregisteredGroup' },
      ],
      similardata:[
        {
          key:'1',
          srademarkPic:'',
          srademarkName:'快捷方式',
          srademarkStatus:'有效-已注册',
          registrationNumber:'40706103',
          iceci:'29',
          applicationDate:'2021-08-26',
          trialDate:'2021-04-20',
          registerDate:'2021-04-20',
          deadline:'2021-04-21',
          shopService:'300195以谷物为主的零食小食',
          similitudeGroup:'3016',
          notregisteredGroup:'2402,555,555,,6,6,6,6,45,4,5'
        },
        
      ],
      uploadList:[
        { title: '文件名称', width:'90%',align:'left',dataIndex: 'fileName'},
        {title: ' ',key: 'action',scopedSlots: { customRender: 'action' },
      },
      ],
      uploadData:[
        {
          fileName:'权利证书名称1',
          id:'1'
        }
      ],
       validatorRules: {
           brandName: [
              { required: true, message: '请输入商标名称!'},
           ],
           brandType: [
              { required: true, message: '请输入商标类型!'},
           ],
           brandValue: [
              { required: true, message: '请输入商标价值!'},
           ],
            applicationNo: [
              { required: true,message: '请输入申请号/注册号!'},
              {  message: '请输入数字申请号/注册号!',type:'number',transform:(value)=> {return Number(value)}},
           ],
        },
      //导入
       columnsExcel:[
          {
            title: '#',
            dataIndex: '',
            key:'rowIndex',
            width:60,
            align:"center",
            customRender:function (t,r,index) {
              return parseInt(index)+1;
            },
            isImportExcelColumns:false
          },
          {
            title:'商标名称',
            align:"center",
            dataIndex: 'brandName'
          },
          {
            title:'商标标签',
            align:"center",
            dataIndex: 'brandLabel'
          },
          {
            title:'商标类型',
            align:"center",
            dataIndex: 'brandType'
          },
          {
            title:'商标价值',
            align:"center",
            dataIndex: 'brandValue'
          },
          {
            title:'国际分类',
            align:"center",
            dataIndex: 'internationalClass'
          },
          {
            title:'商标状态',
            align:"center",
            dataIndex: 'status'
          },
          {
            title:'申请号/注册号',
            align:"center",
            dataIndex: 'applicationNo'
          },
           {
            title:'申请日期',
            align:"center",
            dataIndex: 'applicationTime',
            customRender:function (text) {
              return !text?"":(text.length>10?text.substr(0,10):text)
            }
          },
          {
            title:'初审公告日期',
            align:"center",
            dataIndex: 'firstInstanceTime',
            customRender:function (text) {
              return !text?"":(text.length>10?text.substr(0,10):text)
            }
          },
          {
            title:'注册公告日期',
            align:"center",
            dataIndex: 'registerTime',
            customRender:function (text) {
              return !text?"":(text.length>10?text.substr(0,10):text)
            }
          },
          {
            title:'专用权期限日期',
            align:"center",
            dataIndex: 'termTime',
            customRender:function (text) {
              return !text?"":(text.length>10?text.substr(0,10):text)
            }
          },
          {
            title:'申请人名称',
            align:"center",
            dataIndex: 'applicationName'
          },
          {
            title:'实际权属主体',
            align:"center",
            dataIndex: 'mainBody'
          },
          {
            title:'代理机构',
            align:"center",
            dataIndex: 'agency'
          }                  
        ],
        excelVisible:false,
        excelConfirmLoading:false,
        excelDataSource:[],
        exportXlsTemplateUrl:'templates/excel/brandTemplate.xlsx',
        importDetail:{
           columnsExcel:[
           {
            title: '#',
            dataIndex: '',
            key:'rowIndex',
            width:60,
            align:"center",
            customRender:function (t,r,index) {
              return parseInt(index)+1;
            },
            isImportExcelColumns:false
          },
           
          {
            title:'已申请/核定商品/服务',
            align:"center",
            dataIndex: 'goodsService'
          },
           {
            title:'类似群的价值等级',
            align:"center",
            dataIndex: 'valueLevel'
          },
          {
            title:'具体增值点',
            align:"center",
            dataIndex: 'addedValue'
          },
          {
            title:'具体使用的商品/服务',
            align:"center",
            dataIndex: 'specificUseGoods'
          },
           {
            title:'具体使用的商品/服务',
            align:"center",
            dataIndex: 'specificUseService'
          },
           
          
        ],
        excelVisible:false,
        excelConfirmLoading:false,
        excelDataSource:[],
        exportXlsTemplateUrl:'templates/excel/brandSimilitudeGroupApplicationNoAppTemplate.xlsx',
        clearData:true
        },
        queryParam:{},
        iconFileList: [],
        uploading: false,
        iconFile:{
          visible:false
        },
         /* 分页参数 */
      ipagination:{
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30'],
        showTotal: (total, range) => {
          return  " 共" + total + "条"
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0
      },
      tableLoading:false,
      superFieldList:[],
       superQueryFlag:false,
      /* 高级查询条件 */
      superQueryParams: '',
      /** 高级查询拼接方式 */
      superQueryMatchType: 'and',
    }
    
  },
  computed: {
   
    hasSelected() {
      return this.selectedRowKeys.length > 0;
    }
 
    
  },
  watch:{
    piclist(val,olaVal){
      this.bindAttach(val,'picture');
    },
    certificatelist(val,olaVal){
      this.bindAttach(val,'letterOfAuthorization');
    }
     
  },
  created(){
    this.getSuperFieldList();
    this.initDisc()
    this.reloadData()
  },
  mounted () {
    
  },
  methods: {
     getSuperFieldList(){
        let fieldList=[];
        fieldList.push({type:'string',value:'brandName',text:'商标名称'})
        fieldList.push({type:'string',value:'brandLabel',text:'商标标签'})
        fieldList.push({type:'string',value:'brandType',text:'商标类型'})
        fieldList.push({type:'string',value:'brandValue',text:'商标价值'})
        fieldList.push({type:'string',value:'applicationNo',text:'申请号/注册号'})
        fieldList.push({type:'string',value:'internationalClass',text:'国际分类'})
        fieldList.push({type:'string',value:'groupCode',text:'已覆盖类似群'})
        fieldList.push({type:'string',value:'groupGoodsService',text:'已申请/核定商品/服务'})
        this.superFieldList = fieldList
      },
       getSuperQueryParams() {
      //获取查询条件
        let sqp = {}
        sqp['superQueryParams']=encodeURI(this.superQueryParams)
        sqp['superQueryMatchType'] = this.superQueryMatchType
        this.queryParam = Object.assign(this.queryParam,sqp);

    },
      handleSuperQuery(params, matchType) {
        
        //高级查询方法
        if(!params){
          this.superQueryParams=''
          this.superQueryFlag = false
        }else{
          this.superQueryFlag = true
          this.superQueryParams=JSON.stringify(params)
          this.superQueryMatchType = matchType
        }
        debugger
        this.getSuperQueryParams();
        this.loadData()
        
     },
      handleDelte(){
      let that = this
      if(this.selectedRows.length ==0){
        this.$message.warning('请选择数据');
        return;
      }
        var ids = "";
        
        for (var a = 0; a <  this.selectedRows.length; a++) {
          ids += this.selectedRows[a].id + ",";
        }
        this.$confirm({
          title: "确认删除",
          content: "是否删除选中数据?",
          onOk: function () {
        
            deleteAction(that.url.deleteBatch, {ids: ids}).then((res) => {
              if (res.success) {
                that.$message.success(res.message);
               
                that.loadData();
                 that.onClearSelected();
              } else {
                that.$message.warning(res.message);
              }
            }).finally(() => {
              
            });
          }
        });
    },

    selectBrandLableChange(selectedRowKeys, selectedRows){
        
       this.brandLabel.selectionRows = selectedRows
      this.brandLabel.selectedRowKeys = selectedRowKeys
      
    },
  
     selectAgencyChange(selectedRowKeys, selectedRows){
       
       this.selectAgency.selectionRows = selectedRows
      this.selectAgency.selectedRowKeys = selectedRowKeys
    },
    selectProposerChange(selectedRowKeys, selectedRows){
       
       this.selectProposer.selectionRows = selectedRows
      this.selectProposer.selectedRowKeys = selectedRowKeys
    },
    handlSelectAgencytOk(key,setValueKey){
      let that = this;
    
      let arr = [];
      
      if(that[key].selectionRows.length==0){
        this.$message.warning('请选择数据');
        return;
      }
        that[key].visible=false;
      that[key].selectionRows.forEach(item=>{
        arr.push(item.name)
      })
      that.createFrom[that[key].setValueKey] = arr.join(",");
      
    },
     handlSelectProposerOk(key,setValueKey){
      let that = this;
      
      let arr = [];
      if(that[key].selectionRows.length==0){
        this.$message.warning('请选择数据');
        return;
      }
      that[key].visible=false;
      that[key].selectionRows.forEach(item=>{
        arr.push(item.name)
      })
      that.createFrom[that[key].setValueKey] = arr.join(",");
      
    },
    
    handleOpenModalfucntion(key,title,setValueKey){
    
        let that = this;
        that[key].visible=true
        that[key].title = title
        that[key].setValueKey=setValueKey;
      
        this[this[key].search]();
    },
    handlBrandLableOk(key,setValueKey){
      let that = this;
      
      let arr = [];
      if(that[key].selectionRows.length==0){
        this.$message.warning('请选择数据');
        return;
      }
      that[key].visible=false;
      that[key].selectionRows.forEach(item=>{
        arr.push(item.name)
      })
      that.createFrom[that[key].setValueKey] = arr.join(",");
      
    },
    
    handleBrandLableSearch(keyword){
        let that = this;
        var param = {column:"name",order:"Asc",keyword:keyword,pageNo:0,pageSize:-1,isdel:'0'};
        param.pageNo = this.brandLabel.ipagination.current;
       
        param.pageSize = this.brandLabel.ipagination.pageSize;
      
         getAction(this.url.brandLabel,param).then( res=>{
            that.brandLabel.data = res.result.records
        })
    },
    handleSelectAgencySearch(current){
        let that = this;
        var param = {column:"code",order:"Asc",keyword:current,pageNo:0,pageSize:-1,isdel:false,type:'商标代理机构'};
        param.pageNo = this.selectAgency.ipagination.current;
       
        param.pageSize = this.selectAgency.ipagination.pageSize;
        codeInfoList(param).then( res=>{
            that.selectAgency.data = res.result.records

        })
    },
     handleSelectProposerSearch(current){
       let that = this;
      
        var param = {column:"name",keyword:that.selectProposer.keyword,order:"Asc",pageNo:0,pageSize:-1,isdel:"0"};
        param.pageNo = this.selectProposer.ipagination.current;
        param.pageSize = this.selectProposer.ipagination.pageSize;
        getAction(this.url.brandApplicantMain,param).then( res=>{
            that.selectProposer.data = res.result.records
        })
    },
    handleTableChange(pagination, filters, sorter,key) {
       that[key].ipagination= pagination
      that[key]();
    },
    handleMainTableChange(pagination, filters, sorter){
        this.ipagination = pagination
        this.loadData()
    },
    bindAttach(val,key){
      
      let arr = []
      val.forEach((item,index)=>{
                arr.push(item.id)
      })
      this.createFrom[key]=arr.join(',');
    },
     beforeRemove(file,fileList) {
    },
    uploadPreview(file){
      //以rar、zip、dwg结尾的文件，直接下载不预览
      if (
        endWith(file.fileName, 'rar') ||
        endWith(file.fileName, 'zip') ||
        endWith(file.fileName, 'dwg') ||
        endWith(file.fileName, 'tgz')
      ) {
        
        return true
      }
      let params={
        id:file.id,
        ftpKey:'ftp'
      };
      previewAttach(params).then(result=>{
        const url=URL.createObjectURL(result)
        window.open(process.env.BASE_URL+'/pdf/web/viewer.html?file=' + url)
      }).catch(err => {
        this.$message.warning('下载文件失败');
      })
    },
    handleBranTypeChange(value){
      this.initBranTypeChange(value)

    },
    handleBrandValueChange(value){
      
      this.createFrom.brandValue = value
      this.$forceUpdate() 
    },
    initBranTypeChange(value,isChange = true){
      if(!value){
          this.disc.changeBrandValue = this.disc.brandValue;
          return;
      }
      var selectOps = this.disc.brandType.find(item=>{
        return item.name == value
      })
      let valueArr = []
      if(!!selectOps){
           valueArr =  this.disc.brandValue.filter(item =>{
        return item.parentid == selectOps.code
        })
        if(isChange){
          this.createFrom.brandValue = valueArr[0].name
        }
      }else{
        valueArr =  this.disc.brandValue
      }
     
      this.disc.changeBrandValue = cloneDeep(valueArr) 
      this.$forceUpdate();
    },
    handleCancelBtn(){
      const that = this;
      
      that.createTrademark = false;
       this.$forceUpdate();
    },
    submitForm(){
        const that = this;
       
        // 触发表单验证
        this.$refs.createFromRefs.validate(valid => {
          if (valid) {
            that.confirmLoading = true;
             
            that.handleOkExcel([this.createFrom]);
           
          }
         
        })
    },
    handleAdd(createFrom){
        
        this.createTrademark = true;
         this.$nextTick(()=>{
          this.$refs.createFromRefs.resetFields();

           if(!createFrom){
          createFrom = {};
          createFrom.id = randomUUID();
          this.createTitle = '新建商标'
          createFrom.isAddFlag = "1"
            
        }else{
          this.createTitle = '编辑商标'
          createFrom.isAddFlag = "0"   
           
        }
        this.piclist  = []
        this.certificatelist = []
       
        this.createFrom = cloneDeep(createFrom) ;
        this.initBranTypeChange(this.createFrom.brandType,false);
        this.formId = randomUUID();
        })
         
         
       
        //this.loadAttachInfo();
    },
    loadAttachInfo() {
      let that = this
      getAction(this.url.getAttachInfo, { dbKey: 'Trd',busKey: this.createFrom.id,busField: 'hteLibBrand',busType: 'picture',ftpKey: 'ftp' }).then((res) => {
            that.piclist = cloneDeep( res.data);
            
            that.$forceUpdate();
          })
            getAction(this.url.getAttachInfo, { dbKey: 'Trd',busKey: this.createFrom.id,busField: 'hteLibBrand',busType: 'letterOfAuthorization',ftpKey: 'ftp' }).then((res) => {
            that.certificatelist = cloneDeep( res.data);
            that.$forceUpdate();
          })
        }
    ,
    showPicture(file, fileList){
      var _that = this;
  
       file.forEach((item,index)=>{
          let attachmentVO = {busField:'hteLibBrand',busType:'picture',dbKey:"Trd",ftpKey:'ftp',id:item.id};
         
         getAction(this.url.commonImage,attachmentVO).then(res =>{
          if(res.code === 1){
             
              _that.createFrom.imageUrl = res.data;

                
            }
            }).catch(res=>{
          })
        }) 
    },
    initDisc(){
      let that = this
         codeInfoList({column:"code",order:"Asc",pageNo:0,pageSize:-1,isdel:false,type:'商标类型'}).then( res=>{
          that.disc.brandType=res.result.records
        })
        codeInfoList({column:"code",order:"Asc",pageNo:0,pageSize:-1,isdel:false,type:'商标价值'}).then( res=>{
            that.disc.brandValue=res.result.records
            that.trademarkValue = res.result.records
            this.$nextTick(() => { 
              this.setBtnMore('moreRef0')
            });
        })
        codeInfoList({column:"code",order:"Asc",pageNo:0,pageSize:-1,isdel:false,type:'商标已覆盖类似群'}).then( res=>{
            that.disc.brandGroup=res.result.records
            this.$nextTick(() => { 
              this.setBtnMore('moreRef1')
            });
        })
        codeInfoList({column:"code",order:"Asc",pageNo:0,pageSize:-1,isdel:false,type:'商标状态'}).then( res=>{
            that.disc.brandStatus = res.result.records
        })
        //  codeInfoList({column:"code",order:"Asc",pageNo:0,pageSize:-1,isdel:false,type:'商标代理机构'}).then( res=>{
        //     that.disc.brandAgency = res.result.records
        // })
        //  getAction(this.url.brandApplicantMain,{column:"name",order:"Asc",pageNo:0,pageSize:-1,isdel:"0"}).then( res=>{
        //     that.disc.brandApplicantMain = res.result.records
        // })
        //  getAction(this.url.brandLabel,{column:"name",order:"Asc",pageNo:0,pageSize:-1,isdel:"0"}).then( res=>{
        //     that.disc.brandLabel = res.result.records
        // })
      
    },
    reloadData(){
      this.ipagination.pageSize=10
      this.ipagination.current=1
      this.queryParam = {}
      this.loadData();
    },
    loadData(){

      let that = this;
     
      let queryParam = this.queryParam
      queryParam.pageNo =  this.ipagination.current;
       queryParam.pageSize = this.ipagination.pageSize;
       this.tableLoading = true;
       getAction(this.url.listWeb,queryParam).then(res =>{
        
          if(res.code === 200){
            
               this.reservationData = res.result.records;
               this.totalNumber = res.result.total
               this.ipagination.total = res.result.total
               this.getImgView()
            }
            }).catch(res=>{
          }).finally(res=>{
             this.tableLoading = false;
          })
    },
    handleInfo(params){
    
      
        let urlJump = this.$router.resolve({path: '/trademarklibrary/info' ,query:{brandId:params.id}});
        window.open(urlJump.href,"_blank")
    },
    linkPage(url){
       let urlJump = this.$router.resolve({path: url });
        window.open(urlJump.href,"_blank")
    },
    
    handleSearch(){

    },
    handleToggle(code){
      this.activeCode=code
    },
    handleTogglePage(index){
      this.pageId=index
    },
    ToggleSelectType(code,type,parentid){
      this.queryParam[type]=code
      if(type === 'brandType'){
        this.queryParam.brandValue = ''
         codeInfoList({column:"code",order:"Asc",pageNo:0,pageSize:-1,isdel:false,type:'商标价值',parentid:!!parentid?parentid:null}).then( res=>{
            this.trademarkValue =res.result.records
        })
      }
      this.queryParam =  Object.assign({},this.queryParam)
      this.loadData();
    },
    handleOk(key){
        if(!!key){
        this[key].visible=true;
      }
    },
    handleCancel(key){
      if(!!key){
        this[key].visible=false;
      }
      
    },
    handleChange(){

    },
    onSelectChange(selectedRowKeys,selectedRows) {
      console.log('selectedRowKeys changed: ', selectedRowKeys);
      this.selectedRowKeys = selectedRowKeys;
      this.selectedRows = selectedRows;
    },
     onClearSelected() {
      this.selectedRowKeys = [];
      this.selectedRows = [];
    },
    //
    getImgView(){
      let $that = this;
     
      this.reservationData.forEach((item,index)=>{
        if(!!item.picture){
            let attachmentVO = {busField:'hteLibBrand',busType:'picture',dbKey:"Trd",ftpKey:'ftp',id:item.picture};
        
         getAction($that.url.commonImage,attachmentVO).then(res =>{
          if(res.code === 1){
            
               $that.reservationData[index].imageUrl = res.data;
            }
            }).catch(res=>{
          })
        }
        
      
         
      })
      
     
    },
    exportWebXls:function(){
      let that = this;
     
      let queryParam = this.queryParam
      queryParam.pageNo = 1;
       queryParam.pageSize = -1;
        downloadFileLink(this.url.exportWebXls,'商标库导出',queryParam,{type: 'application/vnd.ms-excel'});
     
    },
    // 导入确认回调
    handleOkExcel:function(data){
        let that =this
        
        this.excelDataSource = [];
        for (let index = 0; index < data.length; index++) {
          const element = data[index];
          if(!element.brandName || !element.brandType || !element.brandValue || !element.applicationNo){
            this.$message.warning(`导入失败商标名称、商标类型、商标价值、申请号/注册号不能为空`);
            return;
          }
          let checkData = data.filter(item =>{
            return item.applicationNo == element.applicationNo; 
          })
          if(!!checkData && checkData.length > 1 ){
            this.$message.warning(`导入失败:${element.applicationNo}申请号/注册号重复`);
            return;
          }
        
        }

        this.excelDataSource = data;
        //数据验证
        this.excelConfirmLoading = true;
        postAction(this.url.addBatch,data).then(res => {
            if(res.code === 200){
              
              this.excelVisible = false;
              this.createTrademark = false;
              this.$message.success(res.message);
              this.loadData();
            }else{
              this.$message.warning('操作异常:'+res.message);
            }
        }).catch(res=>{
                
                this.$message.warning('操作异常:'+res.message);
                
            }).finally(() => {
              that.excelConfirmLoading = false;
              that.confirmLoading = false;
              
            })
        
       
      },
      //打开导入页面
      importExcelDataBtn:function(){       
         this.excelVisible = true;
      },
      //取消回调
      handleCancelExcel:function(){
        this.excelVisible = false;
       
      },
       // 导入确认回调
    handleOkExcelDetail:function(data){
           const that = this
         for (let index = 0; index < data.length; index++) {
          const element = data[index];
          if(!element.goodsService){
            this.$message.warning(`已申请/核定商品/服务不能为空`);
            return;
          }
          // let checkData = data.filter(item =>{
          //   return  item.code == element.code; 
          // })
          // if(!!checkData && checkData.length > 1 ){
          //   this.$message.warning(`导入失败:${item.code }已覆盖类似群重复`);
          //   return;
          // }
         data[index].applicationNo = this.createFrom.applicationNo
        }
        if(this.createFrom.isAddFlag == '1'){
          //新增明细导入
             this.createFrom.brandSimilitudeGroups = data;
               this.importDetail.excelVisible = false;
        }else{
         //编辑修改导入
          that.importDetail.excelConfirmLoading = true
          postAction(this.url.brandSimilitudeGroupAddBatch,data).then(res=>{
                  if(res.success){
                        that.importDetail.excelVisible = false;
                        that.clearDetailSearch();
                        that.$message.success(res.message);
                        
                  }else{
                     that.$message.warning(res.message);
                  }
                }).finally(res=>{
                 
                  that.importDetail.excelConfirmLoading = false
                })
        }
       
      
        
      },
      //打开导入页面
      importExcelDataBtnDetail:function(){  
        let that = this
        // that.importDetail.excelVisible = true;
        this.$refs.createFromRefs.validate(valid => {
          if (!valid) {
           that.$message.warning('请完善表单数据');         
          }else{
            that.importDetail.excelVisible = true;
          } 
        })     
         
      },
        clearDetailSearch(){
        this.productDetail.ipagination.current = 0
       this.productDetail.valueSearch = ''
       this.productDetailSearch(null);
      
    },
      handleDetail(){
        let that = this
        // that.importDetail.excelVisible = true;
        this.$refs.createFromRefs.validate(valid => {
          if (!valid) {
           that.$message.warning('请完善表单数据');         
          }else{
               this.productDetail.visible =true ;
              this.$nextTick(() =>{
                
                that.clearDetailSearch();
              })
               
          } 
        })  
     
      },
      productDetailAdd(data){
        this.productCreat.visible = true
        
        const that = this;
         this.$nextTick(() =>{
            this.$refs.productCreatForm.resetFields();
            if(!data){
              this.productCreat.title='新建撤销风险明细'
               delete this.productCreat.validatorRules.code
              
              data = {applicationNo:this.createFrom.applicationNo}
            }else{
              this.productCreat.title='编辑撤销风险明细'
             this.productCreat.validatorRules = Object.assign(this.productCreat.validatorRules, {code: [
                  { required: true, message: '请输入已覆盖类似群!'},
              ]})
            }
            
              data.keyId = randomUUID() ;
              this.productCreat.validatorRules = cloneDeep(this.productCreat.validatorRules) ;
            this.productCreat.model = cloneDeep(data) ;

         })
        
        
      },
      productCreatHandleOk(){
        let that  = this
         //触发表单验证
        this.$refs.productCreatForm.validate(valid => {
            if (valid) {
                that.productCreat.confirmLoading = true
                postAction(this.url.brandSimilitudeGroupAddBatch,[this.productCreat.model]).then(res=>{
                  if(res.success){
                        that.productCreat.visible = false
                        that.$message.success(res.message);
                        that.clearDetailSearch();
                  }else{
                     that.$message.warning(res.message);
                  }
                }).finally(res=>{
                 
                  that.productCreat.confirmLoading = false
                })
            }
        })
      },
      productDetailDelete(id){
        let that = this
       this.$confirm({
          title: "确认删除",
          content: "是否删除选中数据?",
          onOk: function () {
           
            deleteAction(that.url.brandSimilitudeGroupDelet, {ids: id}).then((res) => {
              if (res.success) {
                //重新计算分页问题
               
                that.clearDetailSearch();
              
              } else {
                that.$message.warning(res.message);
              }
            }).finally(() => {
              
            });
          }
        });
          
      },
      productDetailSearch(keyword){
      let that = this
      let params = {keyword:keyword,column:"code",order:"Asc",applicationNo:this.createFrom.applicationNo}
      params.pageNo = this.productDetail.ipagination.current;
      params.pageSize = this.productDetail.ipagination.pageSize;
      getAction(this.url.brandSimilitudeGroup,params).then(res =>{
        if (res.success) {
          //update-begin---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
          that.productDetail.data = res.result.records||res.result;
           that.productDetail.updateData = res.result.records||res.result;
        
        }
      })
    },
      //取消回调
      handleCancelExcelDetail:function(){
        this.importDetail.excelVisible = false;
       
      },
      handleRemove(file) {
      const index = this.iconFileList.indexOf(file);
      const newFileList = this.iconFileList.slice();
      newFileList.splice(index, 1);
      this.iconFileList = newFileList;
    },
    beforeUpload(file) {
      this.iconFileList = [...this.iconFileList, file];
      this.iconFileList = this.iconFileList.slice(-1);
      const isLt50M = file.size / 1024 / 1024 < 50;
      
       if (!isLt50M) {
        this.iconFileList = [];
        this.$message.error('大小不能超过 50MB!');
      }
      const isZip = file.type.includes('zip');
      if (!isZip) {
      this.iconFileList = [];
      this.$message.error('只能上传zip格式的文件');
      }

      return false;
    },
    handleUpload() {
      const { iconFileList } = this;
      const formData = new FormData();
      iconFileList.forEach(file => {
        formData.append('files[]', file);
      });
      this.uploading = true;

      postAction(this.url.iconUpload,formData).then(res=>{
        
          if(res.success){
            this.iconFileList = [];
           
            this.$message.success(res.result);
            this.reloadData();
            // this.handleCancel('iconFile');
          }else{
            this.$message.error(res.message);
          }
      }).catch(res=>{
        this.$message.error(res.message);
      }).finally(res=>{
           this.uploading = false;
      })
     
    },
  }
};
</script>
<style lang="less" scoped>
.btn-more{display: none;}
&.project-class-more{
  padding-right: 63px;
  position: relative;
  .btn-more{
    display: inline-block;
    position: absolute;
    right: 10px;
    top: 11px;
    padding: 0px 5px;
    cursor: pointer;
    color: #999;
    font-weight: normal;
    &:hover{
      color: #0581ca;
      background-color: #e4e4e4;
      .icon-child-down{
        color: #0581ca;
      }
    }
  }
  ul{
    -webkit-transition: all .3s;
    transition: all .3s;
    overflow: hidden;
    max-height: 700px;
    &.projec-class-list-more{
      max-height: 44px;
    }
  }
} 
.icon-child-down{
  font-size: 11px;
  margin-left: 3px;
  transition: all .3s;
  color: #999;
  &.icon-child-up{
    transform: rotate(180deg);
  }
}
/deep/ .avatar-uploader .el-upload-list__item-status-label {
    display:none;
  }

// /deep/.el-upload-list{
//   display: none;
// }
/deep/ .ant-form input[type='file'] {
    display: none;
}
/deep/ .ant-btn-primary{
  background: #4095e4;
  margin-right: 10px;
}
/deep/ .ant-btn-primary[disabled]{
 background-color: #f5f5f5;

}
/deep/ .ant-btn{
  width: 85px;
  height: 30px;
  border-radius: 2px;
}

/deep/.trademarkInfoPopUp{
  .headerControl{
    text-align: right;
    margin-bottom: 10px;
  }
  .ant-modal-title{
    font-weight: 900;
  }
  .ant-modal-footer{
    text-align: center;
    padding: 20px;
  }
  .ant-modal-header{
    text-align: center;
  }
  .ant-descriptions-bordered .ant-descriptions-item-label{
    width: 170px;
    background-color: #d9dee8;
    border-bottom: 1px solid #f7f7f7
  }
  .ant-descriptions-view{
    border-radius: unset;
  }
  .ant-table-thead > tr > th {
    background: #dadee9 !important;
    padding: 10px;
  }
  .ant-table-thead > tr:first-child > th:first-child,.ant-table table{
    border-radius: unset;
    line-height: 1;
  }

  .ant-table-thead > tr:first-child > th:first-child,.ant-table table{
    border-radius: unset;
    line-height: 1;
  }
  .ant-table-tbody .ant-table-row td{
    padding-top: 10px;
    padding-bottom: 10px;
  }
}
/deep/ .productServicePopUp,/deep/ .intellectualInfoPopUp,/deep/.createTrademarkoPopUp{
  .ant-modal-title{
    font-weight: 900;
  }
  .ant-modal-header{
    text-align: center;
  }
  .ant-col-12{
    margin: 5px 0;
  }
  .ant-btn{
    width: fit-content;
  }
  .status-box{
    padding: 0 50px 20px;
  }
  .product-list{
    border: 1px solid #f5f5f5;
    border-radius: 3px;
    padding: 20px 50px;
    .product-name{
      margin-left: 20px;
    }
  }
  .ant-modal-footer{
    text-align: center;
    padding: 20px;
  }
  .btn{
    text-align: center;
    margin: 30px 0 0;
  }
  .ant-form-item{
    margin-bottom: 0;
  }
  .changeStyle .ant-form-item-label{
    line-height: unset;
    white-space:pre-wrap;
  }
  .upload-demo{
    /deep/ .ant-table-thead > tr > th {
      background: #d9dee8 !important;
    }
    /deep/.ant-table-thead > tr:first-child > th:first-child,/deep/ .ant-table table{
      border-radius: unset;
      line-height: 1;
    }
  }
}
/deep/ .selectKeywordPopUp {
  .ant-col-8{
    margin: 5px 0;
  }
  .ant-modal-title{
    font-weight: 900;
  }
  .ant-modal-header{
    text-align: center;
  }
  .ant-modal-footer{
    text-align: center;
    padding: 20px;
  }
}
/deep/ .processInforPopUp{
  .ant-modal-body{
    padding: 20px 75px;
  }
  .ant-timeline-item-head{
    background-color: #4095e4;
  }
  .ant-timeline-item-tail{
    border-left: 2px dotted #e8e8e8;
  }
  .processStep{
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #eee;
    padding: 0 10px;
    margin-top: 10px;
    .processTime{
      display: flex;
      font-weight: 700;
      span{
        display: inline-block;
        margin-right: 25px;
      }
    }
  }
}
/deep/ .mainTainPopUp,/deep/ .selectAgencyPopUp,/deep/.selectProposerPopUp,/deep/ .selectServicePopUp,/deep/ .productDetailPopUp{
  .ant-modal-title{
    color: #fff;
    font-weight: 900;
  }
  .ant-modal-body{
    padding: 24px 24px 0 24px;
  }
  .ant-input-group.ant-input-group-compact{
    display: flex;
    width: 40%
  }
  .ant-modal-header{
    background: #388cdb;
    color: #fff;
    text-align: center;
  }
  .ant-modal-footer{
    text-align: center;
    padding: 20px;
  }
  .ant-btn-primary{
    background: #4095e4;
  }
  .ant-btn{
    width: 85px;
    height: 30px;
    border-radius: 2px;
    margin-right: 10px;
  }
  .ant-table-thead > tr > th {
    background: #dadee9 !important;
    padding: 10px;
  }
  .ant-table-thead > tr:first-child > th:first-child,.ant-table table{
    border-radius: unset;
    line-height: 1;
  }

  .ant-table-thead > tr:first-child > th:first-child,.ant-table table{
    border-radius: unset;
    line-height: 1;
  }
  .ant-table-tbody .ant-table-row td{
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .headerControl{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
  }
  .selected-box{
    border: 1px solid #eeeeee;
    border-radius: 5px;
    padding: 0px 0 0 10px;
    .ant-select-selection{
      border:unset;
      border-left: 1px solid #eee;
      border-radius: unset;
      margin-left: 10px;
    }
  }
}
  .toggleClick{
    background-color: #0581ca;
    border-bottom: 1px solid #1890ff;
    cursor: pointer;
  }
  .icon-plus{
    font-size: 13px;
    padding-right: 5px;
  }
  .main{
    min-height: 100%;
    background: #f5f5f5;
  }
  .container{
    padding: 0 125px 100px;
    height: 100%;
    .navbar{
      display: flex;
      justify-content: space-between;
      align-items: center;
      /deep/ .ant-input-group.ant-input-group-compact{
          display: flex;
          width: 37%;
          padding-top: 21px;
      }
      >ul{
        list-style: none;
        display: flex;
        padding: 0;
        background: #31a0e1;
        color: #fff;
        margin-top: 20px;
        width: 62%;
        margin-bottom:0;
        li{
          padding: 7px 20px;
          cursor: pointer;
        }
      }
    }
    .trademark-nav{
      background: #fff;
      // border: 1px solid #ededed;
      color: #000;
      -webkit-transition: all .3s;
      transition: all .3s;
      overflow: hidden;
      max-height: 700px;
      margin-top: 15px;
      .hoverShow{
        cursor: pointer;
        border-bottom: 3px solid rgba(255,255,255,0);
        &:hover{
          border-bottom: 3px solid #31a0e1;
        }
      }
      .clickShow{
        border-bottom: 3px solid #31a0e1;
        color: #31a0e1;
        cursor: pointer;
      }
      .projec-class-box{
          font-weight: 600;
          // background: #f5f5f5;
          display: flex;
          justify-content: center;
          align-items: center;
          .projec-class-lable{
            width: 136px;
            padding: 10px 0 10px 20px;
            // float: left;
            font-size: 15px;
            text-align: right;
          }
          .projec-class-list{
            width: calc(100% - 120px);
            padding-left: 10px;
            color: rgba(0, 0, 0, 0.65);
            margin: 0;
            //  float: left;
            //  background: #fff;
            display: block;
            position: relative;
            padding: 0;
            list-style: none;
            li{
              float: left;
              padding: 10px 15px;
            }
          } 
      }
      &.trademark-nav-hidden{
        margin-top: 0;
        max-height: 0;
        border: 0;
      }    
    }
    .showTotal{
      margin: 15px 0 15px 5px;
    }
    .trademark-content{
      background: #fff;
      border: 1px solid #ededed;
      .controlarea{
        padding: 22px 0 0px 20px;
      }
      .trademark-list{
        .reservation-content{
          margin-top: 20px;
          /deep/ .ant-table-small{
            border: unset;
            border-radius: unset;
          }
          /deep/ .ant-table-thead > tr > th{
            border: unset;
            border-radius: unset;
          }
          /deep/ .ant-table-thead{
            background-color:#f6f7f9 ;
          }
          /deep/ .ant-table-small > .ant-table-content > .ant-table-body{
            margin: 0;
          }
          /deep/ .ant-table-small.ant-table-bordered .ant-table-content{
            border-right: none;
          }
          /deep/ .ant-pagination{
            padding-right: 15px;
            padding-top: 20px;
          }
        }
      }
    }
  }
  
     .floatNavTab{
        position: fixed;
        right: 10px;
        top:233px;
        margin: 0;
        // border: 1px solid #e2e2e2;
        background-color: #31a0e1;
        padding: 0;
        li {
        list-style: none;
        cursor: pointer;
        padding: 10px 3px;
        margin: 0;
        color: #ffffff;
        border-bottom: 1px solid #f5f5f5;
        text-align: center;
        &:hover{
          opacity: 0.8;
        }
      }
        .budget-detail,.mission-detail,.invitation-detail{
          border-bottom: 1px solid #f5f5f5;
        }
        .budget-detail,.mission-detail,.invitation-detail,.commissioned-detail{
          display: flex;
          flex-direction: column;
          align-items: center;
          padding: 15px 10px;
          cursor: pointer;
          img{
            margin-bottom: 5px;
          }
          span{
            color:#6cb299;
          }
          p{
            margin: 0;
            color: #ffffff;
          }
        }
      }
      .trademark-tap{
      padding: 8px;
      width:100%;      
      text-align: center;
      color: #999;
      .icon-child-down{
        font-size: 11px;
        margin-left: 3px;
        transition: all .3s;
        color: #999;
        &.icon-child-up{
          transform: rotate(180deg);
        }
      } 
      >span{padding: 5px;cursor: pointer;
        &:hover{
          color: #0581ca;
          background-color: #e4e4e4;
          .icon-child-down{
            color: #0581ca;
          }
        }
      }      
    }
    .j-super-query-box{

      /deep/ .ant-btn{width: auto}
    } 
    @media (max-width: 1080px){
      .container{padding: 0 30px 100px !important}
    }
</style>
